<style>
    .content {
        width: 15%;
        float: left;
    }

    .toleft {
        margin-left: 10%;
        overflow: hidden;
    }

</style>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north'" class="center">
        <div class="webmap">
            <p class="webmaptip">当前位置:</p>
            <a href="javascript:;" class="easyui-link" data-options="plain:true">统计管理</a>
            <p class="webmaptip">></p>
            <a href="javascript:;" class="easyui-link" data-options="plain:true">借款统计</a>
        </div>
        <div class="querybycon">
            <form id="query">
                <div class="queryinfo">
                    <div class="db"><span style="margin-right: 20px">时间</span><input name="startDate" id="startDate"
                                                                                     class="easyui-datetimebox">
                        -
                        <input name="endDate" id="endDate" class="easyui-datetimebox">
                    </div>
                    <div class="query">
                        <a id="querybtn" href="javascript:;" class="easyui-linkbutton  "
                           data-options="iconCls:'fa fa-search'"></a>
                    </div>
                </div>
            </form>
        </div>
        <div class="querybtn">
            <a id="exportbtn" href="javascript:;" class="easyui-linkbutton  "
               data-options="iconCls:''">导出</a>
            <div style="visibility: hidden;">aa</div>
        </div>
    </div>
    <div data-options="region:'center'" class="center">
        <div class="toleft" style="margin-top: 30px;">
            <div class="content">
                <span>总借款额</span> <a href="#" title="撮合成功的融资项目中借款总额" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>总借款笔数</span> <a href="#" title="撮合成功的所有融资项目总笔数" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>总借款用户数</span> <a href="#" title="撮合成功的所有融资项目总借款人数" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>累计待还本金额</span> <a href="#" title="平台所有借款人尚未偿还的本金" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>累计待还利息</span> <a href="#" title="平台所有借款人尚未偿还的利息" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>累计待还总额</span> <a href="#" title="平台所有借款人尚未偿还的本息（累计待还本金+累计待还利息）" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
        </div>

        <div class="toleft" style="margin-top: 20px;">
            <div class="content" id="borrowAmount">
                ￥0.00
            </div>
            <div class="content" id="borrowNum">
                0笔
            </div>
            <div class="content" id="borrowerNum">
                0人
            </div>
            <div class="content" id="toBePaidPrincipal">
                ￥0.00
            </div>
            <div class="content" id="toBePaidInterest">
                ￥0.00
            </div>
            <div class="content" id="toBePaidAmount">
                ￥0.00
            </div>
        </div>

        <div class="toleft" style="margin-top: 30px;">
            <div class="content">
                <span>累计逾期本金</span> <a href="#" title="This is the tooltip message." class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>累计逾期利息</span> <a href="#" title="This is the tooltip message." class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>累计逾期总额</span> <a href="#" title="This is the tooltip message." class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>项目逾期率</span> <a href="#" title="This is the tooltip message." class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>金额逾期率</span> <a href="#" title="This is the tooltip message." class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>逾期项目个数</span> <a href="#" title="This is the tooltip message." class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
        </div>

        <div class="toleft" style="margin-top: 20px;">
            <div class="content" id="overduePrincipal">
                ￥0.00
            </div>
            <div class="content" id="overdueInterest">
                ￥0.00
            </div>
            <div class="content" id="overdueAmount">
                ￥0.00
            </div>
            <div class="content" id="targetOverdueRate">
                0%
            </div>
            <div class="content" id="overdueRate">
                0%
            </div>
            <div class="content" id="overdueNum">
                0个
            </div>
        </div>

        <div class="toleft" style="margin-top: 30px;">
            <div class="content">
                <span>人均累计借款金</span> <a href="#" title="交易总额与借款人总数之比" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>每笔累计借款金额</span> <a href="#" title="交易总额与交易总笔数之比" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>最大单户融资余额占比</span> <a href="#" title="截至统计时点，待偿金额最大的借款人的待偿金额与平台总待偿金额之比" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>最大十户融资余额占比</span> <a href="#" title="截至统计时点，待偿金额最大的前十名借款人的待偿金额总和与平台总待偿金额之比"
                                           class="easyui-tooltip"><img src="static/image/tip.png"></a>
            </div>
        </div>

        <div class="toleft" style="margin-top: 20px;">
            <div class="content" id="perCapitaBorrowAmount">
                ￥0.00
            </div>
            <div class="content" id="eachBorrowAmount">
                ￥0
            </div>
            <div class="content" id="mostToBePaidRate">
                0%
            </div>
            <div class="content" id="topTenToBePaidRate">
                ￥0.00
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $.get("/borrowstatistics/list", {startDate: "", endDate: ""}, function (msg) {
            if (msg.state == "SUCCESS") {
                getHtml(msg);
            } else {
                $.messager.show({
                    title: '操作提示',
                    msg: msg.message,
                    timeout: 2000,
                    showType: 'slide'
                });
            }
        })
    })
    //查看详情
    $("#querybtn").click(function () {
        var startDate = $('#startDate').datetimebox('getValue');
        var endDate = $('#endDate').datetimebox('getValue');
        $.get("/borrowstatistics/list", {startDate: startDate, endDate: endDate}, function (msg) {
            if (msg.state == "SUCCESS") {
                getHtml(msg);
            } else {
                $.messager.show({
                    title: '操作提示',
                    msg: msg.message,
                    timeout: 2000,
                    showType: 'slide'
                });
            }
        })
    });

    //导出excel
    $("#exportbtn").click(function () {
        var startDate = $('#startDate').datetimebox('getValue');
        var endDate = $('#endDate').datetimebox('getValue');
        window.open('/borrowstatistics/export?startDate=' + startDate + '&endDate=' + endDate);
    });
    function getHtml(msg) {
        console.info(msg);
        if (msg.data != null && msg.data != undefined) {
            $("#borrowAmount").html('￥' + formatNumber(msg.data.borrowAmount, 2));
            $("#borrowNum").html(msg.data.borrowNum + " 笔");
            $("#borrowerNum").html(msg.data.borrowerNum + " 人");

            $("#toBePaidPrincipal").html('￥' + formatNumber(msg.data.toBePaidPrincipal, 2));
            $("#toBePaidInterest").html('￥' + formatNumber(msg.data.toBePaidInterest, 2));
            $("#toBePaidAmount").html('￥' + formatNumber(msg.data.toBePaidAmount, 2));

            $("#overduePrincipal").html('￥' + formatNumber(msg.data.overduePrincipal, 2));
            $("#overdueInterest").html('￥' + formatNumber(msg.data.overdueInterest, 2));
            $("#overdueAmount").html('￥' + formatNumber(msg.data.overdueAmount, 2));
            $("#targetOverdueRate").html(msg.data.targetOverdueRate + '%');
            $("#overdueRate").html(msg.data.overdueRate + '%');
            $("#overdueNum").html(msg.data.overdueNum + "个");

            $("#perCapitaBorrowAmount").html('￥' + formatNumber(msg.data.perCapitaBorrowAmount, 2));
            $("#eachBorrowAmount").html('￥' + formatNumber(msg.data.eachBorrowAmount, 2));
            $("#mostToBePaidRate").html(msg.data.mostToBePaidRate + '%');
            $("#topTenToBePaidRate").html(msg.data.topTenToBePaidRate + '%');

        } else {
            $("#borrowAmount").html('￥0.00');
            $("#borrowNum").html("0笔");
            $("#borrowerNum").html("0人");
            $("#toBePaidPrincipal").html('￥0.00');
            $("#toBePaidInterest").html('￥0.00');
            $("#toBePaidAmount").html('￥0.00');

            $("#overduePrincipal").html('￥0.00');
            $("#overdueInterest").html('￥0.00');
            $("#overdueAmount").html('￥0.00');
            $("#targetOverdueRate").html('0.00%');
            $("#overdueRate").html('0.00%');
            $("#overdueNum").html("0个");

            $("#perCapitaBorrowAmount").html('￥0.00');
            $("#eachBorrowAmount").html('￥0.00');
            $("#mostToBePaidRate").html('0.00%');
            $("#topTenToBePaidRate").html('0.00%');
        }
    }
    function formatNumber(value, fixed) {
        var number = Number(value);
        if (isNaN(number)) {
            return '';
        } else {
            return number.toFixed(2);
        }
    }

</script>
